<template>
    <div>
        <el-container style="position: absolute; top: 55px; bottom: 0; right: 0; left: 0;">
            <el-header class="d-flex align-items-center border-bottom">
                <!-- 头部 -->
                <div class="d-flex mr-auto">
                    <el-select class="mr-2" placeholder="请选择图片排序方式" style="width: 250px;height: 40px;"
                        v-model="searchForm.order">
                        <el-option label="降序" value="desc"></el-option>
                        <el-option label="升序" value="esc"></el-option>
                    </el-select>
                    <el-input class="mr-2" style="width: 250px; height: 40px;" placeholder="请输入图片名称"
                        v-model="searchForm.keyword"></el-input>
                    <!-- 点击搜索之后重新获取getImageList -->
                    <el-button type="success" @click="getImageList">搜索</el-button>
                </div>
                <el-button type="warning" size="mizi" @click="unChoose()" v-if="chooseList.length">取消选中</el-button>
                <el-button type="danger" size="mizi" @click="delImage({ all: true })"
                    v-if="chooseList.length">批量删除</el-button>
                <el-button type="success" @click="openAlbumModel(false)">创建相册</el-button>
                <el-button type="warning" @click="uploadModel = true">上传图片</el-button>
            </el-header>

            <!-- el-aside和el-main都可以分别滚动 -->
            <el-container>
                <el-aside width="200px" style="position: absolute; top: 60px; left: 0; bottom: 60px;"
                    class="bg-white border-right">
                    <!-- 侧边 | 相册的列表 将要被封装在components\image\album-item.vue中-->
                    <ul class="list-group list-group-flush">
                        <!--<li class="list-group-item list-group-item-action d-flex" style="cursor: pointer;"
                            v-for="(item, index) in albums" :key="index" @click="albumsChange(index)"
                            :class="{ 'active albumsActive': ablumIndex === index }">
                            {{ item.name }}
                            <el-dropdown class="ml-auto">
                                <span class="btn btn-ligth btn-sm border">
                                    {{ item.count }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                        @click.stop.native="openAlbumModel({ item, index })">修改</el-dropdown-item>
                                    <el-dropdown-item @click.stop.native="albumDel(index)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li> -->
                        <album-item v-for="(item, index) in albums" :key="index" :item="item" :index="index"
                            :active="albumIndex === index" @change="albumsChange" @edit="openAlbumModel"
                            @del="albumDel"></album-item>
                    </ul>
                </el-aside>
                <el-container>
                    <el-main style="position: absolute; top: 60px; left: 200px; bottom: 60px; right: 0;">
                        <!-- 主内容 -->
                        <!-- :gutter每个元素之间的间距  -->
                        <el-row :gutter="10">
                            <!-- 大中小屏情况下每一行的个数 -->
                            <el-col :span="24" :lg="4" :md="6" :sm="8" v-for="(item, index) in imageList" :key="index">
                                <!-- :span每一列的宽度占比 24分之一  -->
                                <!-- 设置内边距为0 -->
                                <el-card class="box-card mb-3 position-relative" :body-style="{ padding: '0px' }"
                                    shadow="hover" style="cursor: pointer;">
                                    <!-- 批量选中后出现的边框和数字角标 -->
                                    <div class="border" :class="{ 'border-danger': item.isCheck }">
                                        <span class="badge badge-danger" style="position: absolute; right: 0;top: 0;"
                                            v-if="item.isCheck">{{ item.checkOrder }} </span>
                                        <!-- 封装好的易导致效率低 -->
                                        <!-- <el-tag type="danger" effect="dark" style="position: absolute; right: 0;top: 0;"
                                            size="mini" v-if="item.isCheck">
                                            1
                                        </el-tag> -->

                                        <img :src="item.url" :alt="item.name" :title="item.name" class="w-100"
                                            style="height: 100px" @click="chooseImage(item)">
                                        <div class="w-100 text-white position-absolute align-items-center text-center"
                                            style="background:rgba(0,0,0,0.5); margin-top: -25px;">
                                            {{ item.name }}
                                        </div>
                                        <el-button-group class="d-flex justify-content-center">
                                            <el-button icon="el-icon-view" size="mini" class="p-2"
                                                @click="previewImage(item)"></el-button>
                                            <el-button icon="el-icon-edit" size="mini" class="p-2"
                                                @click="editImage(item, index)"></el-button>
                                            <!-- @click="delImage({ index,item})传递索引和这个对象过来 -->
                                            <el-button icon="el-icon-delete" size="mini" class="p-2"
                                                @click="delImage({ index, item })"></el-button>
                                        </el-button-group>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-container>

            <!-- 底部 -->
            <el-footer class="border-top d-flex align-items-center px-0">
                <!-- flex-shrink: 0;保证不被右边的挤压 -->
                <div style="width: 200px; flex-shrink: 0;"
                    class="h-100 d-flex align-items-center justify-content-center border-right">
                    <el-button-group>
                        <el-button size="mini" :disabled="albumPage === 1"
                            @click="changeAlbumPage('pre')">上一页</el-button>
                        <el-button size="mini" @click="changeAlbumPage('next')"
                            :disabled="albumPage === Math.ceil(albumTotal / 10)">下一页</el-button>
                    </el-button-group>
                </div>
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </el-footer>
        </el-container>

        <!-- 修改或者创建相册 | 动态改变title-->
        <el-dialog :title="albumModelTitle" :visible.sync="albumModel">
            <el-form ref="form" :model="albumForm" label-width="80px" class="mt-2">
                <el-form-item label="相册名称">
                    <el-input v-model="albumForm.name" size="medium" placeholder="请输入相册名称"></el-input>
                </el-form-item>
                <el-form-item label="相册序号">
                    <el-input-number v-model="albumForm.order" :min="0" style="width: auto;"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="albumModel = false">取消</el-button>
                <!-- confirmAlbumModel是一个公用的方法，点击确定修改、创建相册 -->
                <el-button type="primary" @click="confirmAlbumModel">确定</el-button>
            </div>
        </el-dialog>


        <!-- 上传图片模态框 -->
        <!-- @close="_initlized"在模态框关闭时触发重新加载的方法 -->
        <el-dialog title="上传图片" :visible.sync="uploadModel" width="405px" top="5vh" @close="_initlized">
            <el-upload class="upload-demo" drag action="/admin/image/upload" multiple
                :headers="{ token: $store.state.user.token }" :data="{ image_class_id: image_class_id }" name="img"
                :on-success="uploadSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>

        <!-- 预览图片模态框 -->
        <el-dialog title="图片详情" :visible.sync="previewModel" width="50%" top="5vh">
            <div style="margin:-100px,-20px,-30px,-20px"></div>
            <img :src="previewUrl" alt="图片未正确加载" style="width: 100%;">
        </el-dialog>
    </div>
</template>

<script>
import albumItem from '@/components/image/album-item.vue'

export default {
    name: 'ImageIndex',
    components: {
        albumItem,
    },
    // 接收layout（主要想接受loading）
    inject: ['layout'],
    data() {
        return {
            // 数据
            searchForm: {
                order: 'desc',//默认是降序
                keyword: '',
            },
            albumIndex: 0,  //当前选中的相册
            albums: [], // 相册列表

            // 后端接口的分页
            albumPage: 1, // 默认当前页码
            albumTotal: 0, //后端数据库中的相册总条数

            albumModel: false, // 创建相册的模态框状态
            albumsEditIndex: -1, // 当前编辑的相册的索引，用于判断是编辑还是创建，大于-1将是编辑
            albumForm: {
                name: '', // 相册名称
                order: 0, // 相册图片数量
            },
            uploadModel: false, // 上传图片的模态框状态
            previewModel: false, // 预览图片的模态框状态
            previewUrl: '', // 预览图片的默认地址为空
            imageList: [], // 图片列表
            chooseList: [], // 选中的图片列表,选中得到都会存在这里

            currentPage: 1, // 当前页码

            pageSize: 10,
            pageSizes: [10, 20, 50, 100],
            total: 10,

        }
    },
    computed: {
        albumModelTitle() {
            return this.albumsEditIndex > -1 ? '修改相册' : '创建相册'
        },
        // 选中相册的id
        image_class_id() {
            let item = this.albums[this.albumIndex];
            if (item) {
                return item.id
            }
            return 0
        },
        // 当前选中相册图片列表url
        getImageListUrl() {
            let other = ''
            if (this.searchForm.keyword) {
                other = `&keyword=${this.searchForm.keyword}`
            }
            return `/admin/imageclass/${this.image_class_id}/image/${this.currentPage}?limit=${this.pageSize}&order=${this.searchForm.order}${other}`
        }
    },
    created() {
        // 组件创建时执行的代码
        this._initlized();
    },
    methods: {
        // 获取对应相册下的相册列表
        getImageList() {
            this.layout.showLoading()
            // 使用当前选中相册的 ID
            const currentAlbumId = this.albums[this.albumIndex]?.id || 1425
            const url = `/admin/imageclass/${currentAlbumId}/image/${this.currentPage}`

            this.$axios.get(url, {
                params: {
                    limit: this.pageSize,
                    order: this.searchForm.order,
                    keyword: this.searchForm.keyword
                },
                token: true
            }).then(res => {
                let result = res.data.data
                this.imageList = result.list.map(item => {
                    return {
                        id: item.id,
                        url: item.url,
                        name: item.name,
                        isCheck: false, // 默认是否选中
                        checkOrder: 0,    // 选中的序号
                    }
                })
                this.total = result.totalCount
                this.layout.hideLoading()
            }).catch(err => {
                console.error('获取图片列表失败：', err);
                this.layout.hideLoading()
            })
        },
        // 方法
        _initlized() {
            // 获取相册列表
            this.layout.showLoading()
            // const token = sessionStorage.getItem('token')
            // console.log('当前token：', token)


            // 修改为获取相册列表的 API
            this.$axios.get(`/admin/imageclass/${this.albumPage}`, {
                params: {
                    limit: 10,
                    order: 'desc'
                },
                token: true,  // 使用 token 配置项
                loading: true // 显示 loading
            }).then(res => {
                // console.log('相册列表响应：', res);
                this.albumModel = false; // 关闭相册模态框
                this.layout.hideLoading(); // 隐藏 loading
                // 处理响应数据
                let result = res.data.data;
                this.albums = result.list;
                this.albumTotal = result.totalCount;
                // 获取选中相册下的第一页图片列表
                this.getImageList()
            }).catch(err => {
                console.error('获取相册列表失败：', err);
                console.error('请求配置：', err.config);
                console.error('响应数据：', err.response?.data);
                this.layout.hideLoading()
            })
        },
        // 相册列表的点击事件,切换相册   
        albumsChange(index) {
            this.albumIndex = index;
            this.getImageList();
        },

        // 打开相册修改、创建模态框
        openAlbumModel(obj) {
            if (obj) {
                let { item, index } = obj;
                // 初始化表单，ablumForm
                this.albumForm.name = item.name;
                this.albumForm.order = item.order;
                // 初始化当前的索引，用于判断是否为修改
                this.albumsEditIndex = index; // 赋值当前编辑的相册的索引
                // 打开模态框
                return this.albumModel = true;
            }
            //    创建(初始化时清空一下表单)
            this.albumForm = {
                name: '', // 相册名称
                order: 0, // 相册图片数量
            };
            this.albumsEditIndex = -1; // 赋值当前编辑的相册的索引
            this.albumModel = true
        },
        // 确认修改、创建相册
        confirmAlbumModel() {
            // 判断是否为修改
            if (this.albumsEditIndex > -1) {
                this.albumEdit();
                return this.albumModel = false;
            }
            // 追加albums（创建相册）obj为false时执行的
            this.albums.unshift({
                name: this.albumForm.name,
                order: this.albumForm.order,
                num: 0, //默认的添加的相册的图片的数量
            })
            this.albumModel = false;
        },
        // 修改相册(和创建相册是一个的模态框)
        albumEdit() {
            let item = this.albums[this.albumsEditIndex]
            this.layout.showLoading()
            this.$axios.post('/admin/imageclass/' + item.id, this.albumForm,
                { token: true }).then(() => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.layout.hideLoading()
                    this._initlized()
                }).catch(() => {
                    this.layout.hideLoading()
                })
        },

        // 删除相册
        albumDel(index) {
            this.$confirm('是否确定删除该相册', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.albums.splice(index, 1);
                let id = this.albums[index].id; // 获取相册的id
                this.layout.showLoading(); // 显示加载状态
                this.$axios.delete('/admin/imageclass/' + id, {
                    token: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 删除相册成功后，重新获取相册列表
                    this._initlized();
                    this.layout.hideLoading(); // 关闭加载状态
                }).catch(() => {
                    this.layout.hideLoading(); // 关闭加载状态
                    this.$message({
                        type: 'error',
                        message: '删除失败，请重试'
                    });
                });

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },

        // 预览图片,基于模态框设计
        previewImage(item) {
            this.previewUrl = item.url; // 预览图片的地址等于当前的获取item的url
            this.previewModel = true;
        },

        // 修改图片名称
        editImage(item) {
            this.$prompt('请输入新的名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.name,
                inputValidator(val) {
                    if (!val) {
                        return '图片名称不能为空'
                    }
                    return true
                }
            }).then(({ value }) => {
                // 调用后端 API 更新图片名称
                this.layout.showLoading(); // 显示加载状态
                this.$axios.post(`/admin/image/${item.id}`, {
                    name: value
                }, {
                    token: true
                }).then(() => {
                    this.layout.hideLoading(); // 加载状态
                    this._initialized(); // 重新获取图片列表
                    item.name = value
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    })
                }).catch(() => {
                    // console.error('修改图片名称失败：', err)
                    this.layout.hideLoading(); // 加载状态
                })
            }).catch(() => {
                // 用户取消输入
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                })
            })
        },

        // 删除当前图片
        delImage(obj) {
            this.$confirm(obj.all ? '是否确定删除该选中所有的图片' : '是否删除图片', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.layout.showLoading(); // 显示加载状态
                if (obj.all) {
                    // // 批量删除
                    // let list = this.imageList.filter(img => {
                    //     // 希望找不到的图片
                    //     // 1.在imageList中找不到的图片，返回true
                    //     return !this.chooseList.some(c => {
                    //         // 判断当前的图片是否在选中的图片中
                    //         // 如果在选中的图片中，返回true
                    //         return c.id === img.id
                    //     })
                    // });
                    // // 打印未被选中的图片
                    // // console.log(list); 
                    // this.imageList = list; // 重新赋值imageList
                    // this.chooseList = []; // 清空选中的图片
                    let ids = this.chooseList.map(item => item.id); // 获取选中的图片的id
                    this.$axios.post('/admin/image/delete_all', {
                        ids: ids
                    }, {
                        token: true
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '批量删除成功!'
                        });
                        this._initialized(); // 重新获取图片列表
                        this.chooseList = []; // 清空选中的图片
                        this.layout.hideLoading(); // 关闭加载状态
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '批量删除失败，请重试'
                        });
                        this._initialized(); // 重新获取图片列表
                        this.chooseList = []; // 清空选中的图片
                        this.layout.hideLoading(); // 关闭加载状态
                    });
                } else {
                    // 单个删除
                    // 调用后端 API 删除图片
                    this.$axios.delete('/admin/image/' + obj.item.id, {
                        token: true
                    }).then(() => {
                        this.getImageList(); // 重新获取图片列表
                        this.layout.hideLoading(); // 关闭加载状态
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.getImageList(); // 重新获取图片列表
                        this.layout.hideLoading(); // 关闭加载状态
                        this.$message({
                            type: 'error',
                            message: '删除失败，请重试'
                        });
                    });
                    // this.imageList.splice(obj.index, 1); // 删除图片
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },

        // 选中图片的样式
        chooseImage(item) {
            // 之前未选中
            if (!item.isCheck) {
                this.chooseList.push({ id: item.id, url: item.url }); // 选中图片存入数组chooseList中
                // 计算序号
                item.checkOrder = this.chooseList.length; // 选中的序号
                // 修改状态
                item.isCheck = true; // 选中状态
                return;
            }
            // 取消选中图片，1.找到在chooseList中的索引，删除
            let i = this.chooseList.findIndex(v => v.id === item.id); // 找到在chooseList中的索引
            if (i === -1) return; // 如果没有找到，直接返回
            // 重新计算序号
            let length = this.chooseList.length; // 选中的图片的数量
            if (i + 1 < length) { // 如果不是最后一个，取消选中中间的序号
                // 重新计算imageList中选中的序号
                for (let j = i; j < length; j++) {
                    let no = this.imageList.findIndex(v => v.id === this.chooseList[j].id); // 找到在imageList中的索引
                    if (no > -1) {
                        this.imageList[no].checkOrder = this.imageList[no].checkOrder - 1; // 重新计算选中的序号
                    }
                }
            }
            this.chooseList.splice(i, 1); // 删除选中的图片的序号
            // 修改状态
            item.isCheck = false;
            // 重置序号
            item.checkOrder = 0;
        },

        // // 批量删除图片,与delImage()方法合并
        // imageDelAll() {
        //     let list = this.imageList.filter(img => {
        //         // 希望找不到的图片
        //         // 1.在imageList中找不到的图片，返回true
        //         return !this.chooseList.some(c => {
        //             // 判断当前的图片是否在选中的图片中
        //             // 如果在选中的图片中，返回true
        //             return c.id === img.id
        //         })
        //     });
        //     // 打印未被选中的图片
        //     // console.log(list); 
        //     this.imageList = list; // 重新赋值imageList
        //     this.chooseList = []; // 清空选中的图片
        // }

        // 取消批量选中的图片
        unChoose() {
            this.imageList.forEach(img => {
                // 找到所有选中的图片
                let i = this.chooseList.findIndex(item => {
                    return item.id === img.id
                })
                if (i > -1) {
                    // 大于-1.拿到了这些图片，取消选中的样式
                    // 排序归零
                    img.isCheck = false; // 取消选中状态样式
                    img.checkOrder = '0'; // 取消选中序号
                    this.chooseList.splice(i, 1); // 从chooseList中移除
                }
            });
        },

        // 分页,限制每一页显示多少条
        handleSizeChange(val) {
            this.pageSize = val,
                this.getImageList()
        },
        // 限制页面的跳转
        handleCurrentChange(val) {
            this.currentPage = val,
                this.getImageList()
        },

        // 相册的分页功能实现
        changeAlbumPage(type) {
            if (type === 'pre') {
                this.albumPage--
            } else {
                this.albumPage++
            }
            this._initlized()
        },
        // 上传图片成功的回调
        uploadSuccess(response, file, fileList) {
            console.log('上传成功的回调：', response, file, fileList);

        }
    },
};
</script>

<style scoped>
.albumsActive {
    background-color: #8bd9f3;
    font-weight: bold;
    border: #8bd9f3;
}
</style>